<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>主分析维度概率统计图</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
	</head>

	<body>
		<div id="app">
			<el-row>
				<el-col :span="12">
					<div id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>

		</div>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {

					}
				},
				mounted: function() {
					var myChart = echarts.init(document.getElementById('myChart'));
					var option = {
						title: {
							text: '主分析维度概率统计图'
						},
						legend: {
							//data: ['1#'],
						},
						radar: [{
							indicator: [{
									text: '0',
									max: 100
								},
								{
									text: '22.5',
									max: 100
								},
								{
									text: '45',
									max: 100
								},
								{
									text: '67.5',
									max: 100
								},
								{
									text: '90',
									max: 100
								},
								{
									text: '112.5',
									max: 100
								},
								{
									text: '135',
									max: 100
								},
								{
									text: '157.5',
									max: 100
								},
								{
									text: '180',
									max: 100
								},
								{
									text: '202.5',
									max: 100
								},
								{
									text: '225',
									max: 100
								},
								{
									text: '247.5',
									max: 100
								},
								{
									text: '270',
									max: 100
								},
								{
									text: '292.5',
									max: 100
								},
								{
									text: '315',
									max: 100
								},
								{
									text: '337.5',
									max: 100
								},

							],
							//center: ['25%', '50%'],
							//radius: 150,
							// startAngle: 0,
							splitNumber: 5,
							shape: 'circle',
							name: {
								formatter: '{value}',
								textStyle: {
									color: '#72ACD1'
								}
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(0, 0, 0, 0.2)',
									//type: 'dashed'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(0, 0, 0, 0.2)',
									//type: 'dashed'
								}
							},
							splitArea: {
								areaStyle: {
									color: ['rgba(255,255,255,1)', 'rgba(255,255,255,1)']
								}
							}
						}],
						series: [{
							name: '风向玫瑰图',
							type: 'radar',
							data: [{
								value: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80],
								name: '1#',
								symbol: 'none',
								lineStyle: {
									normal: {
										width: 0,
									}
								},
								areaStyle: {
									normal: {
										color: '#67C23A'
									}
								}
							}]
						}]
					}

					myChart.setOption(option)
				}
			})
		</script>
	</body>

</html>
